<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>imgCut</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body ng-app="m" ng-controller="c">

<script>
    angular.module("m",[])
        .controller("c",function ($scope) {
            $scope.opStatus = -1;
            $scope.fillStyleArray = ["#FFFFFF","#FFFFFF","#BDF5D4","#BDF5D4","#8EFFFF","#FFD9CA"];

            $scope.clearImg = function () {
                ctx.clearRect(0,0,500,800);
                ctx.fillStyle="black";
                ctx.fillRect(0,0,500,800);
                console.log(pathArray);

                for(var f=0;f<6;f++){
                    ctx.beginPath();
                    ctx.fillStyle = $scope.fillStyleArray[f];
                    ctx.moveTo(pathArray[f][0].x,pathArray[f][0].y);
                    for(var i=1;i<pathArray[f].length;i++){
                        ctx.lineTo(pathArray[f][i].x,pathArray[f][i].y);
                    }
                    ctx.fill();
                    ctx.closePath();
                    ctx.stroke();
                }
            };
        });
</script>

    <!--<div class="container">
        &lt;!&ndash;<img src="img/img01.jpg" width="100%" alt="">&ndash;&gt;
        <canvas id="yuanxing" width="200" height="200" style="border:1px solid #000;"></canvas>
    </div>
    <script type=text/javascript>
        var canvas=document.getElementById("yuanxing");
        var context=canvas.getContext("2d");
        context.fillStyle="#FF0000";  //设置背景色为红色
        context.beginPath();          //按照下边参数开始绘制新路径
        context.arc(100,100,100,90,Math.PI*2,true);
        //第一个参数：圆点x坐标；
        //第二个参数:圆点y轴坐标；
        //第三个参数：半径；
        //第四个参数：起始角度；
        //Math.PI*2是JS计算方法，是圆
        //第六个参数：是否按照顺时针
        context.closePath();      //关闭路径
        context.fill();           //开始填充
    </script>-->

    <!--<div class="container">-->
        <img style="display: none;" id="scream" width="100%" src="asset/img1.jpg">
        <div id="canvas-container" style="position: relative;">
            <canvas id="myCanvas" width="500" height="800" ng-style="{'background-color':opStatus==-1?'':'#0C0D10'}"
                    style="border:1px solid #d3d3d3;"></canvas>
            <div style="position: absolute;top:300px;left:550px;width: 100px;height: 1500px;">
                <button ng-click="opStatus=0" style="margin-top: 15px;" class="btn btn-primary btn-lg">开始</button>
                <button ng-click="opStatus=1;" style="margin-top: 15px;" class="btn btn-danger btn-lg">重来</button>
                <button ng-click="clearImg();" style="margin-top: 15px;" class="btn btn-success btn-lg">确定</button>
                <button ng-click="opStatus=3" style="margin-top: 15px;" class="btn btn-info btn-lg">上传</button>
            </div>
        </div>
    <!--</div>-->
    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var img=document.getElementById("scream");
        img.onload = function() {
            ctx.drawImage(img,0,0,500,800);
        };
        var pathArray = [[],[],[],[],[],[]];//顺序严格(从上到下从左到右)：眉毛->眼睛->鼻子->嘴巴
        console.log(pathArray.length);
        c.onmousedown = function(ev) {
            var e = ev || window.event,currentIndex;
            console.log(e.clientX+","+e.clientY);
            ctx.strokeStyle='white';
            ctx.fillStyle='white';
            ctx.moveTo(e.clientX,e.clientY);

            for(var i=0;i<6;i++){
                if(pathArray[i].length==0){
                    pathArray[i].push({x:e.clientX,y:e.clientY});
                    currentIndex = i;
                    break;
                }
            }

            document.onmousemove = function(ev) {
                var e = ev || window.event;//获取event对象
                ctx.lineTo(e.clientX,e.clientY);
                ctx.stroke();
                pathArray[currentIndex].push({x:e.clientX,y:e.clientY});
            };

            document.onmouseup = function() {
                pathArray[currentIndex].push({x:e.clientX,y:e.clientY});
                ctx.fill();
                ctx.closePath();
                ctx.stroke();
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    </script>

</body>
</html>